<template>
    <div class="homes">
        <div class="contents-box">
            <div class="title-img">

                <div class="time-img">
                    <div class="time-title">{{"截至时间:" +showTime}}</div>
                </div>
            </div>


            <div class="city-content">
                <div v-for="(item, index) in descList" :key="index" @click="itemClick(item)">
                    <div class="back-img">
                        <div class="title">{{item.kpiName}}</div>
                        <img class="zhuhe-img" src="../../assets/q2Markert/icon_q2_item_zhuhe_new.png" />
                        <div class="value-item" v-for="(iitem, iIndex) in item.list" :key="iIndex">
                            <div class="value-content">
                                <div class="city-title">{{iitem.areaName}}
                                    <div class="value-title">{{dealNum(iitem.value, 2)}}</div>
                                </div>
                            </div>
                            
                        </div>
                        <img class="line-img" src="../../assets/q3Markert/fb_1.png" />
                        <img class="jiayou-img" src="../../assets/q2Markert/icon_q2_item_jiayou_new.png" />

                        <div class="value-item" v-for="(iitem, iIndex) in ascList[index].list" :key="iIndex">
                            <div class="value-content">
                                <div class="city-title">{{iitem.areaName}}
                                    <div class="value-title">{{dealNum(iitem.value, 2)}}</div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="footer-button"  @click="reportDetailClick">报表详情</div>
    </div>
   
</template>

<script>
import NumberUtil from "@/utils/NumberUtil"
export default {
    props: ["showTime", "descList", "ascList", "battleName"],
    setup(props, {emit}) {
        function dealNum(num, index){
            return NumberUtil.dealNumberPrecision(num, index)
        }
        function itemClick(item){
            emit('itemClick', item)
        }
        function reportDetailClick(){
            emit('reportDetailClick')
        }
        return {
            dealNum, itemClick, reportDetailClick
        }
    }
}
</script>


<style lang='scss' scoped>
    .homes{
        width: 100%;
        height: 100%;
        background: #eaeaea;
        // overflow: auto;
        overflow: hidden;
    }
    .contents-box {
        width: 100%;
        height: calc(100% - 54px);
        overflow-y: auto;
        background: #427ce7;
    }
    .contents-box::-webkit-scrollbar {
        width: 0;
    }
    .title-img {
        background: url("../../assets/q3Markert/toubu_bg.png") no-repeat 0 0;
        background-size: 100% 100%;
        height: 376px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;

        .back-icon {
            margin-top: 30px;
            margin-left: 20px;
        }
    }

    .time-img {
        display: flex;
        // position:absolute;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        // margin-top: 250px;
        margin-bottom: 20px;

        .time-title {
            background: url("../../assets/q3Markert/time_bg.png") no-repeat 0 0;
            background-size: 100% 100%;
            height: 34px;
            width: 250px;
            font-size: 18px;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .content-part {
        background: #eaeaea;
        font-size: 14px;
        .item-part {
            height: 36px;
            line-height: 36px;
            background: #ffffff;
            border-radius: 2px;
            padding-left: 5px;
            margin: 10px;
        }
    }

    .city-content {
        padding: 0 10px;
        .back-img {
            background: url("../../assets/q3Markert/neirong_tb2.png") no-repeat
                0 0;
            background-size: 100% 100%;
            height: 376px;
            width: 100%;
            overflow: auto;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }
    }

    .title {
        font-size: 16px;
        color: #ffffff;
        text-align: center;
    }

    .all-title {
        font-size: 16px;
        color: #427ce7;
        text-align: center;
        margin-top: 20px;
    }

    .zhuhe-img {
        width: 50%;
    }

    .value-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .jiayou-img {
            width: 30%;
        }

        .value-content {
            display: flex;
            justify-content: center;
            margin-bottom: 5px;
            .city-title {
                font-size: 16px;
                color: #427ce7;
                display: flex;
            }

            .value-title {
                font-size: 18px;
                font-weight: bold;
            }
        }

        .line-img {
            width: 60%;
            margin: 10px;
        }
    }

    .county-value-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .jiayou-img {
            width: 30%;
        }

        .value-content {
            display: flex;
            justify-content: center;
            margin-bottom: 5px;
            .city-title {
                font-size: 16px;
                color: #427ce7;
                display: flex;
            }

            .value-title {
                font-size: 18px;
                font-weight: bold;
            }
        }

        .line-img {
            width: 60%;
            margin: 10px;
        }
    }

    .footer-button {
        height: 54px;
        width: 100%;
        background: #427ce7;
        color: #ffffff;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>